<template>
  <div class="footer1" ref="footerModular" @mousemove="flag && move($event)">
    <FooterPlayList/>
    <div class="EditionCenter">
      <ClickPlay /> <FooterAlbum /><FooterPlay /> <FooterSongFunction/><FooterSongList />
    </div>
  </div>
</template>

<script>
import FooterPlay from "./FooterPlay.vue";
import ClickPlay from "./ClickPlay.vue";
import FooterAlbum from "./FooterAlbum.vue";
import FooterSongList from "./FooterSongList.vue";
import FooterPlayList from "./FooterPlayList.vue";
import FooterSongFunction from './FooterSongFunction.vue'
export default {
  name: "Fouter",
  data() {
    return {
      url: "",
      num: 1,
      offset: "",
      flag:false,
      eventName:''
    };
  },
  methods: {
    move(el) {
      this.offset = el.pageY;
      
    },  
    
  },
  computed: {
    gettime() {
      
      return this.$refs.speed.currentTime;
    },
  },
  components: {
    FooterPlay,
    ClickPlay,
    FooterAlbum,
    FooterSongList,
    FooterPlayList,
    FooterSongFunction
  },
  watch: {
    offset(newvalue, oldvalue) {
      if (newvalue != '') {
        if (oldvalue) {
        if (oldvalue < newvalue) {
            
              //  向上移动的距离，返回给对应的事件名
            this.$bus.$emit(this.eventName + 'down',newvalue - oldvalue)
       
        } else {
              //  向下移动的距离，返回给对应的事件名
          this.$bus.$emit(this.eventName + 'up',oldvalue - newvalue)
        }
      }
      }
      
    },
  },
  mounted(){


    //  移除移动
    this.$bus.$on('remove_move',(el) =>{
       this.offset = ''
        this.flag = el
    })
    //判断音量键和播放列表是否隐藏
     this.$bus.$on('volume_show', (el) => {
        if (el.path.indexOf(this.$refs.footerModular) == -1) this.$bus.$emit('volume_isshow',false);
    })
    

      

   //  获取总线事件名
    this.$bus.$on('getMoveEventName', (el) => {
        
         this.eventName = el;
         this.flag = true
        
    })
        
     
  }
};
</script>


<style scoped>
.footer1 {
  position: fixed;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  background: url(../images/playbar.png) repeat-x;
  height: 53px;
  z-index: 999;
  
}
.player {
  width: 400px;
  height: 50px;
}
.EditionCenter {
  margin: 0 auto;

  width: 980px;
  height: 47px;
}
</style>

